<template>
  <n-grid :cols="cols || '4'" x-gap="20" y-gap="20" class="cards">
    <n-gi v-for="card in cards" class="color_card" :class="color[card.type]">
      <div class="content">
        <div class="icon">
          <a-icon :name="card.icon"></a-icon>
        </div>
        <div class="cont">
          <div>
            <div class="title">{{ card.title }}</div>
            <div class="value">{{ card.value }}</div>
          </div>
        </div>
      </div>
      <div class="round r1"></div>
      <div class="round r2"></div>
      <div class="round r3"></div>
    </n-gi>
  </n-grid>
</template>
<script setup lang="ts">

interface Card {
  type: number,
  title: string,
  value: string,
  icon: string,
}

let props = defineProps<{
  cards: Card[],
  cols?: string,
}>()

enum color {
  purple,
  blue,
  orange,
  pink,
  purpleBlue,
}

</script>
<style lang="scss" scoped>
.cards {
  margin-bottom: 20px;
}

.color_card {
  min-height: 110px;
  position: relative;
  overflow: hidden;
  color: white;

  @include themeify {
    border-radius: theme('radius');

    &:hover {
      box-shadow: 0 0 10px theme('font');
    }
  }



  &.purple {
    background: linear-gradient(110deg, #b47af5, #8443da);
  }

  &.blue {
    background: linear-gradient(110deg, #5980e0, #4753d5);
  }

  &.orange {
    background: linear-gradient(110deg, #fda577, #fb8793);
  }

  &.pink {
    background: linear-gradient(110deg, #fa5797, #9a46a6);
  }

  &.purpleBlue {
    background: linear-gradient(110deg, #b194e6, #6a8fe7);
  }

  .content {
    width: 100%;
    height: 100%;
    display: flex;

    .icon {
      width: 80px;

      font-size: 35px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cont {
      display: flex;
      justify-content: center;
      align-items: center;

      .title {
        font-size: 14px;
        font-weight: 400;
      }

      .value {
        font-size: 24px;
        font-weight: bold;
      }
    }
  }

}

.round {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  position: absolute;

  &.r1 {
    right: -40px;
    top: 40%;
    width: 150px;
    height: 150px;
  }

  &.r2 {
    right: -20px;
    top: -5%;
    width: 90px;
    height: 90px;
  }

  &.r3 {
    right: 80px;
    top: -35px;
    width: 50px;
    height: 50px;
  }
}
</style>